<template>
  <div>
    <a-layout>
      <a-layout-sider class="platform-list" width="180">
        <div
          :class="platformIdActive === item.platformId ? 'list-item list-item-active' : 'list-item'"
          :title="item.platformName"
          v-for="item in platformList"
          :key="item.platformId"
          @click="changePlatform(item.platformId, item.platformName)"
        >
          {{item.platformName}}
        </div>
      </a-layout-sider>
      <a-layout-content class="platform-data">
        <div style="overflow: hidden; margin-bottom: 20px">
          <div style="float: right;">
            <a-button type="primary" style="margin-right: 16px" @click="addAccountFn()">
              <a-icon type="plus" />新增
            </a-button>
            <a-button type="primary" @click="deleteAccountFn()">
              <a-icon type="delete" />批量删除
            </a-button>
          </div>
        </div>
        <a-table
          v-if="platformIdActive === 'wx'"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="wxColumns"
          :data-source="tableData"
          :pagination="pagination"
        >
          <span slot="action" slot-scope="text, record">
            <a @click="editData(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm
              title="是否确定删除?"
              @confirm="() => onDelete(record.id)"
            >
              <a href="javascript:;">删除</a>
            </a-popconfirm>
          </span>
        </a-table>
        <a-table
          v-else-if="platformIdActive === 'dy'"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="dyColumns"
          :data-source="tableData"
          :pagination="pagination"
        >
          <span slot="action" slot-scope="text, record">
            <a @click="editData(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm
              title="是否确定删除?"
              @confirm="() => onDelete(record.id)"
            >
              <a href="javascript:;">删除</a>
            </a-popconfirm>
          </span>
        </a-table>
        <a-table
          v-else-if="platformIdActive === 'xhs'"
          rowKey="id"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="xhsColumns"
          :data-source="tableData"
          :pagination="pagination"
          @change="handleTableChange"
        >
          <span slot="action" slot-scope="text, record">
            <a @click="editData(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm
              title="是否确定删除?"
              @confirm="() => onDelete(record.id)"
            >
              <a href="javascript:;">删除</a>
            </a-popconfirm>
          </span>
        </a-table>
        <a-table
          v-else-if="platformIdActive === 'ks'"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="ksColumns"
          :data-source="tableData"
          :pagination="pagination"
        >
          <span slot="action" slot-scope="text, record">
            <a @click="editData(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm
              title="是否确定删除?"
              @confirm="() => onDelete(record.id)"
            >
              <a href="javascript:;">删除</a>
            </a-popconfirm>
          </span>
        </a-table>
        <a-table
          v-else-if="platformIdActive === 'wb'"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="wbColumns"
          :data-source="tableData"
          :pagination="pagination"
        >
          <span slot="action" slot-scope="text, record">
            <a @click="editData(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm
              title="是否确定删除?"
              @confirm="() => onDelete(record.id)"
            >
              <a href="javascript:;">删除</a>
            </a-popconfirm>
          </span>
        </a-table>
        <a-table
          v-else-if="platformIdActive === 'bili'"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="biliColumns"
          :data-source="tableData"
          :pagination="pagination"
        >
          <span slot="action" slot-scope="text, record">
            <a @click="editData(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm
              title="是否确定删除?"
              @confirm="() => onDelete(record.id)"
            >
              <a href="javascript:;">删除</a>
            </a-popconfirm>
          </span>
        </a-table>
      </a-layout-content>
    </a-layout>
    <a-modal v-model="addVisible" :title="modalTitle" @ok="onSubmit" @cancel="handleCancel" :destroyOnClose="true">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="平台">
          <a-input v-model="platformNameActive" :disabled="true" />
        </a-form-model-item>
        <a-form-model-item label="账号" prop="name">
          <a-input v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="描述" prop="description">
          <a-input v-model="form.description" type="textarea" />
        </a-form-model-item>
        <a-form-model-item label="accountId" prop="accountId" v-if="platformIdActive === 'dy' || platformIdActive === 'xhs' || platformIdActive === 'wb' || platformIdActive === 'bili'">
          <a-input v-model="form.accountId" />
        </a-form-model-item>
        <a-form-model-item label="appId" prop="appId" v-if="platformIdActive === 'wx' || platformIdActive === 'ks'">
          <a-input v-model="form.appId" />
        </a-form-model-item>
        <a-form-model-item label="appSecret" prop="appSecret" v-if="platformIdActive === 'wx' || platformIdActive === 'ks' || platformIdActive === 'bili'">
          <a-input v-model="form.appSecret" />
        </a-form-model-item>
        <a-form-model-item label="clientId" prop="clientId" v-if="platformIdActive === 'bili'">
          <a-input v-model="form.clientId" />
        </a-form-model-item>
        <a-form-model-item label="clientKey" prop="clientKey" v-if="platformIdActive === 'dy'">
          <a-input v-model="form.clientKey" />
        </a-form-model-item>
        <a-form-model-item label="clientSecret" prop="clientSecret" v-if="platformIdActive === 'dy'">
          <a-input v-model="form.clientSecret" />
        </a-form-model-item>
        <a-form-model-item label="分享链接" prop="shareUrl" v-if="platformIdActive === 'ks'">
          <a-input v-model="form.shareUrl" type="textarea" />
          <div style="color: red; font-size: 12px; margin-top: -10px">* 分享链接需从app获取，网页获取到的无效</div>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
  //自媒体信息管理
  import { getAction, postAction } from '@/api/manage'

  export default {
    name: "accountSetting",
    data() {
      return {
        url: {
          platformAccount: '/platformAccount/query',
          platformAccountAdd: '/platformAccount/add',
          platformAccountDelete: '/platformAccount/delete',
          platformAccountBatchDelete: '/platformAccount/batchDelete',
          platformAccountUpdate: '/platformAccount/update'
        },
        platformList: [
          {
            platformName: '微信',
            platformId: 'wx'
          },{
            platformName: '抖音',
            platformId: 'dy'
          },{
            platformName: '小红书',
            platformId: 'xhs'
          },{
            platformName: '快手',
            platformId: 'ks'
          },{
            platformName: '微博',
            platformId: 'wb'
          },{
            platformName: '哔哩哔哩',
            platformId: 'bili'
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'action' },
          }
        ],
        platformIdActive: 'wx',
        platformNameActive: '微信',
        pagination: {
          current: 1,
          total: 0,
          pageSize: 10,
        },
        tableData: [],
        wxColumns: [
          {
            title: '账号',
            dataIndex: 'name',
          },
          {
            title: '描述',
            dataIndex: 'description',
          },
          {
            title: 'appId',
            dataIndex: 'appId',
          },
          {
            title: 'appSecret',
            dataIndex: 'appSecret',
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'action' },
          }
        ],
        dyColumns: [
          {
            title: '账号',
            dataIndex: 'name',
          },
          {
            title: '描述',
            dataIndex: 'description',
          },
          {
            title: 'accountId',
            dataIndex: 'accountId',
          },
          {
            title: 'clientKey',
            dataIndex: 'clientKey',
          },
          {
            title: 'clientSecret',
            dataIndex: 'clientSecret',
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'action' },
          }
        ],
        xhsColumns: [
          {
            title: '账号',
            dataIndex: 'name',
          },
          {
            title: '描述',
            dataIndex: 'description',
          },
          {
            title: 'accountId',
            dataIndex: 'accountId',
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'action' },
          }
        ],
        ksColumns: [
          {
            title: '账号',
            dataIndex: 'name',
          },
          {
            title: '描述',
            dataIndex: 'description',
          },
          {
            title: 'appId',
            dataIndex: 'appId',
          },
          {
            title: 'appSecret',
            dataIndex: 'appSecret',
          },
          {
            title: '分享链接',
            dataIndex: 'shareUrl',
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'action' },
          }
        ],
        wbColumns: [
          {
            title: '账号',
            dataIndex: 'name',
          },
          {
            title: '描述',
            dataIndex: 'description',
          },
          {
            title: 'accountId',
            dataIndex: 'accountId',
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'action' },
          }
        ],
        biliColumns: [
          {
            title: '账号',
            dataIndex: 'name',
          },
          {
            title: '描述',
            dataIndex: 'description',
          },
          {
            title: 'accountId',
            dataIndex: 'accountId',
          },
          {
            title: 'appSecret',
            dataIndex: 'appSecret',
          },
          {
            title: 'clientId',
            dataIndex: 'clientId',
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'action' },
          }
        ],
        selectedRowKeys: [],
        modalTitle: '',
        addVisible: false,
        labelCol: { span: 5 },
        wrapperCol: { span: 14 },
        other: '',
        form: {
          platformType: '',
          name: '',
          description: '',
          accountId: '',
          appId: '',
          appSecret: '',
          clientId: '',
          clientKey: '',
          clientSecret: '',
          shareUrl: '',
        },
        rules: {
          name: [{ required: true, message: '请输入账号', trigger: 'blur' }],
          description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
          accountId: [{ required: true, message: '请输入accountId', trigger: 'blur' }],
          appId: [{ required: true, message: '请输入appId', trigger: 'blur' }],
          appSecret: [{ required: true, message: '请输入appSecret', trigger: 'blur' }],
          clientId: [{ required: true, message: '请输入clientId', trigger: 'blur' }],
          clientKey: [{ required: true, message: '请输入clientKey', trigger: 'blur' }],
          clientSecret: [{ required: true, message: '请输入clientSecret', trigger: 'blur' }],
          shareUrl: [{ required: true, message: '请输入分享链接', trigger: 'blur' }],
        },
      }
    },
    created() {
      this.getPlatformAccount();
    },
    methods: {
      getPlatformAccount() {
        const params = {
          platformType: this.platformIdActive,
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize
        }
        postAction(this.url.platformAccount, params).then(res=>{
          if(res.success && res.result){
            if (res.result.total <= this.pagination.pageSize && this.pagination.current > 1) {
              this.pagination = {
                current: 1,
                total: 0,
                pageSize: 10,
              };
              this.getPlatformAccount();
            } else {
              this.tableData = res.result.records;
              this.pagination.total = res.result.total;
            }
          }
        })
      },
      changePlatform(type, name) {
        if (this.platformIdActive !== type) {
          this.platformIdActive = type;
          this.platformNameActive = name;
          this.selectedRowKeys = [];
          this.pagination = {
            current: 1,
            total: 0,
            pageSize: 10,
          };
        }
        this.$nextTick(() => {
          this.getPlatformAccount();
        })
      },
      onSelectChange(selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys;
      },
      deleteAccountFn() {
        if (this.selectedRowKeys.length === 0) {
          this.$message.warning('请先选择需要删除的账号！');
          return false;
        }
        const that = this;
        this.$confirm({
          title: '是否确定批量删除选中账号?',
          onOk() {
            postAction(that.url.platformAccountBatchDelete, {ids: that.selectedRowKeys}).then(res=>{
              if(res.success){
                that.$message.success('删除成功');
                that.pagination = {
                  current: 1,
                  total: 0,
                  pageSize: 10,
                };
                that.selectedRowKeys = [];
                that.$nextTick(() => {
                  that.getPlatformAccount();
                })
              } else {
                that.$message.error(res.message);
              }
            })
          },
          onCancel() {},
        });
      },
      addAccountFn() {
        this.modalTitle = '新增账号';
        this.addVisible = true;
      },
      onSubmit() {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            let newObject = {};
            Object.keys(this.form).forEach(key => {
              if (this.form[key] !== '') {
                newObject[key] = this.form[key]
              }
            })
            newObject.platformType = this.platformIdActive;
            if (this.modalTitle === '新增账号') {
              postAction(this.url.platformAccountAdd, newObject).then(res=>{
                if(res.success){
                  this.$message.success('新增成功');
                  this.handleCancel();
                  this.addVisible = false;
                  this.getPlatformAccount();
                } else {
                  this.$message.error(res.message);
                }
              })
            } else if (this.modalTitle === '编辑账号') {
              postAction(this.url.platformAccountUpdate, newObject).then(res=>{
                if(res.success){
                  this.$message.success('编辑成功');
                  this.handleCancel();
                  this.addVisible = false;
                  this.getPlatformAccount();
                } else {
                  this.$message.error(res.message);
                }
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleCancel() {
        this.$refs.ruleForm.resetFields();
        this.form = {
          platformType: '',
          name: '',
          description: '',
          accountId: '',
          appId: '',
          appSecret: '',
          clientId: '',
          clientKey: '',
          clientSecret: '',
          shareUrl: '',
        }
      },
      editData(record) {
        this.form = JSON.parse(JSON.stringify(record));
        this.modalTitle = '编辑账号';
        this.addVisible = true;
      },
      onDelete(id) {
        postAction(this.url.platformAccountDelete, {id}).then(res=>{
          if(res.success){
            this.$message.success('删除成功');
            this.getPlatformAccount();
          } else {
            this.$message.error(res.message);
          }
        })
      },
      handleTableChange(pagination) {
        const pager = { ...this.pagination };
        pager.current = pagination.current;
        this.pagination = pager;
        this.getPlatformAccount();
      },
    }
  }
</script>

<style scoped lang="less">
  .classification {
    overflow-x: auto;
    .floatParent {
      display: inline-block;
      width: 2105px;
      .media-item {
        width: 340px;
        float: left;
        margin-right: 13px;
        background: #F7F8FA;
        padding: 22px 16px;
        overflow: hidden;
        border-radius: 4px 4px 0 0;
        cursor: pointer;
        .media-icon {
          width: 44px;
          height: 44px;
          float: left;
          margin-right: 4px;
        }
        .media-data {
          float: left;
          margin-left: 12px;
          .data-title {
            font-size: 14px;
            color: #666;
          }
          .data-item {
            font-weight: bold;
            font-size: 24px;
            color: #333;
          }
        }
      }
      .media-item:last-child {
        margin-right: 0;
      }
      .media-item-active {
        background: #1C9711;
        .data-title {
          color: #fff !important;
        }
        .data-item {
          color: #fff !important;
        }
      }
    }
  }
  .data-detail {
    padding: 12px;
    background: #fff;
    border-radius: 0 0 4px 4px;
    .data-display {
      border: 1px solid #F7F8FA;
    }
    .detail-title {
      font-weight: 600;
      font-size: 16px;
      color: #333333;
      margin: 20px 0;
    }
  }
  .platform-list {
    background: #F0F2F5;
    .list-item {
      line-height: 48px;
      font-size: 14px;
      color: #333333;
      padding: 0 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
    }
    .list-item-active {
      background: #fff !important;
    }
  }
  .platform-data {
    background: #fff;
    padding: 16px;
    .account-detail {
      background: #F7F8FA;
      border-radius: 4px;
      margin-bottom: 16px;
    }
  }

</style>